<%@page contentType="text/html; charset=UTF-8" trimDirectiveWhitespaces="true" pageEncoding="UTF-8"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
    <div class="layui-header">
        <div class="layui-logo">IMS智能制造物联网系统</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/">首页</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    <shiro:principal property="username"/>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/logout">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree site-demo-nav">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">所有商品</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="javascript:;">列表三</a></dd>
                        <dd><a href="javascript:void(0);" class="layTabPlus" tab_url="${pageContext.request.contextPath}/system/menu/list">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">云市场</a></li>
                <li class="layui-nav-item"><a href="">发布商品</a></li>
            </ul>
        </div>
    </div>
<script src="${pageContext.request.contextPath}/static/layui/layui.all.js"></script>
<script>
    layui.use('element', function(){
        var element = layui.element;
    });

    var $ = layui.jquery;
    var layer = layui.layer;
    var element = layui.element;
    var util = layui.util;
    var table = layui.table;

    var layTabPlus={
        _tabs:{},
        _opt:{
            refresh:true,
            lay_filter:null,
            tab_jump:false
        },
        init:function(opt){
            _this=this;
            if(opt){
                _this._opt.refresh = opt.refresh || _this._opt.refresh;
                _this._opt.tab_jump = opt.tab_jump || _this._opt.tab_jump;
                _this._opt.lay_filter = opt.lay_filter;
            }
            if(null==this._opt.lay_filter){
                throw new Error("lay_filter can't be null");
            }
            element.on('tabDelete('+this._opt.lay_filter+')', function(data){
                var tab_id=$(this.parentNode).attr('lay-id');
                delete _this._tabs[tab_id];
            });
            $(".layui-tab-title").on('click',".layui-icon-refresh",function(){
                var iframe=$("#"+$(this).attr('f_id'))[0];
                console.log(iframe);
                iframe.src=iframe.src;
            });
            $('body').on('click','.layTabPlus',function(){
                _this.addTab(this);
            });
            //css
            document.write('<style>.layui-body{overflow-y: hidden;}.layui-tab{margin: 0;}.layui-tab-title li .layui-icon-refresh:hover{border-radius:2px;background-color:#FF5722;color:#fff}.layui-tab-title li .layui-icon-refresh{position:relative;display:inline-block;width:18px;height:18px;line-height:20px;margin-left:8px;top:1px;text-align:center;font-size:14px;color:#c2c2c2;transition:all .2s;-webkit-transition:all .2s}.layui-tab-title{padding-top:0!important;border-top:5px solid #009688}.layui-tab-title .layui-this:after{border-width:0!important}.noclose i{display:none!important}.layui-tab-title .layui-this{color:#fff;background:#009688}</style>');
        },
        addTab:function(obj,title){//1直接传dom 2传url和title
            var tab_url=obj;
            var tab_title=title||tab_url;
            var iframe_id='ltp_'+Date.now().toString(36);
            if(obj instanceof HTMLElement){
                var tab_jump=obj.getAttribute('tab_jump');
                if(tab_jump){
                    this._opt.tab_jump=true;
                }
                tab_url=obj.getAttribute('tab_url');
                tab_title=obj.innerHTML;
            }
            if(this._opt.refresh){
                tab_title+=' <i class="layui-icon layui-icon-refresh" f_id="'+iframe_id+'"></i>';
            }
            if(this._tabs[tab_url]==null){
                var tab_jump_str='';
                if(!this._opt.tab_jump){
                    tab_jump_str='sandbox="allow-scripts allow-same-origin allow-popups"';
                }
                element.tabAdd(this._opt.lay_filter, {
                    title: tab_title
                    ,content: '<iframe id="'+iframe_id+'" src="'+tab_url+'" style="width:100%;" height="2000" onload="layTabPlus.setIframeHeight(this)" frameborder="0" scrolling="auto" '+tab_jump_str+'></iframe>' //支持传入html
                    ,id: tab_url
                });
                this._tabs[tab_url]=iframe_id;
            }
            element.tabChange(this._opt.lay_filter, tab_url);
        },
        setIframeHeight:function(iframe){
            iframe.height = document.documentElement.clientHeight-150;
        }
    }

    layTabPlus.init({
        lay_filter: 'imsTab'
    });

</script>